<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>atMe</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div class="atMe-text">
        <div class="content">
            <div class="atMe-text-title">
                有什么新鲜事想告诉大家?
            </div>
            <div class="atMe-close">
                <a href="javascript:void(0);" class="atMe-close-icon">X</a>
            </div>
            <div class="inner">
                <div class="detail">
                    <div class="send-weibo clearfix">
                        <div class="title-area clearfix">
                            <div class="title"></div>
                            <div class="num S-txt2">还可以输入<span>140</span>字</div>
                            <div class="key S-textb"></div>
                        </div>
                        <div class="input">
                            <textarea id='atMe-target'></textarea>
                        </div>
                        <div class="func_area clearfix">
                            <div class="func">
                                <a href="javascript:void(0)" class="btn-a btn-30px" node-type="submit">发布</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  <div class="menu-list">
       <ul>
           <li class="suggest-title">选择昵称或轻敲空格完成输入</li>
           <li class="cur">
       <a href="#">我的损友</a>
           </li>
       </ul>
       </div> -->
    </div>
    <div class="modal"></div>
</body>
<script type="text/javascript" src="atMe.js"></script>
<script type="text/javascript">
//鼠标拖动
var util = {
    addClass: function(o, targetClass) {
        if (!util.hasClass(o, targetClass)) {
            o.className += (' ' + targetClass);
        }
    },
    removeClass: function(o, targetClass) {
        var cs;
        if (util.hasClass(o, targetClass)) {
            cs = o.className;
            o.className = cs.replace(targetClass, '').replace(/\s{2,}/g, ' ');
        }
    },
    hasClass: function(o, targetClass) {
        var cs = o.className;
        if (cs.indexOf(targetClass) != -1) {
            return true;
        }
        return false;
    }
}
var moveWithMouse = function(target, dragger, area) {
    var cor = {};
    dragger = dragger || target;
    area = area || {
        left: 0,
        top: 0
    };
    dragger.addEventListener('mousedown', function(e) {
        cor.startx = e.screenX;
        cor.starty = e.screenY;
        cor.relatex = cor.startx - parseInt(getComputedStyle(target)['left']);
        cor.relatey = cor.starty - parseInt(getComputedStyle(target)['top']);
        cor.ismove = true;
    });
    document.addEventListener('mousemove', function(e) {
        if (cor.ismove) {
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            target.style.left = e.screenX - cor.relatex + 'px';
            target.style.top = e.screenY - cor.relatey + 'px';
        }
    });
    document.addEventListener('mouseup', function(e) {
        cor.ismove = false;
    });
};
var target = document.querySelector('.atMe-text'),
    dragger = document.querySelector('.atMe-text-title'),
    ta = document.querySelector('textarea');
moveWithMouse(target, dragger);
ta.addEventListener('focus', function() {
    util.addClass(this.parentNode, 'clicked');
});
ta.addEventListener('blur', function() {
    util.removeClass(this.parentNode, 'clicked');
});
var a = new atMe({
    target: '#atMe-target',
    friends: ['张三', '李四', '王二']
});
</script>

</html>
